<!doctype html>
<head>
	<meta charset="utf-8">
	<title>React-Images</title>
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
	<meta name="keywords" content="react,reactjs,react component,lightbox,react lightbox,react images,image,images,ui,javascript">
	<meta name="description" content="A simple, responsive Lightbox component for displaying an array of images.">
	<meta property="og:locale" content="en-us">
	<meta property="og:title" content="React-Images">
	<meta property="og:description" content="A simple, responsive Lightbox component for displaying an array of images.">
	<meta property="og:url" content="https://jossmac.github.io/react-images">
	<meta property="og:site_name" content="React-Images">
	<meta property="og:type" content="article">
	<link rel="stylesheet" href="example.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
	<div class="page-wrapper">
		<div class="container">
			<nav class="left-col">
				<ul class="page-nav">
					<li class="page-nav__item">
						<a class="page-nav__link" href="#examples">Examples</a>
					</li>
					<li class="page-nav__item">
						<a class="page-nav__link" href="#getting-started">Getting started</a>
					</li>
					<li class="page-nav__item">
						<a class="page-nav__link" href="#options">Options</a>
					</li>
					<li class="page-nav__item">
						<a class="page-nav__link" href="#license">License</a>
					</li>
					<li class="page-nav__item">
						<a class="page-nav__link" href="#help">Help</a>
					</li>
				</ul>
			</nav>
			<div class="right-col">
				<div class="page-content">
					<header class="page-header">
						<h1 class="page-header__title">React Images</h1>
						<p class="page-header__subtitle">A simple, responsive Lightbox component for <a href="http://facebook.github.io/react/" target="_blank">ReactJS</a> to display an array of images.</p>
					</header>
					<div class="page-subheader">
						<a href="http://github.com/jossmac/react-images" class="page-subheader__link" target="_blank">Code and Docs on GitHub</a>
						<span class="page-subheader__button">
							<a id="github-stars-button" class="github-button" data-style="" href="https://github.com/jossmac/react-images" data-count-href="/jossmac/react-images/stargazers" data-count-api="/repos/jossmac/react-images#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star jossmac/react-images on GitHub">Star</a>
						</span>
					</div>
					<div class="page-body">
						<section id="examples" class="section-examples">
							<h2>Examples</h2>
							<div id="example"></div>
						</section>

						<section id="getting-started" class="section-getting-started">
							<h2>Getting Started</h2>
							<p>1. Install using yarn:</p>
							<pre>yarn add react-images</pre>
							<p>… or npm:</p>
							<pre>npm install react-images --save</pre>
							<p>2. Example usage with JSX:</p>
							<pre><code>&lt;Lightbox
  images={[
    { src: '../images/photo-1.jpg' },
    { src: '../images/photo-2.jpg' }
  ]}
  isOpen={this.state.lightboxIsOpen}
  onClickPrev={this.gotoPrevLightboxImage}
  onClickNext={this.gotoNextLightboxImage}
  onClose={this.closeLightbox}
/&gt;</code></pre>

						</section>

						<section id="options" class="section-options">
							<h2>Options</h2>
							<div class="options-table-container">
								<table class="options-table">
									<thead>
										<tr>
											<th align="left">Property</th>
											<th align="left">Type</th>
											<th align="left">Default</th>
											<th align="left">Description</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td align="left">backdropClosesModal</td>
											<td align="left">bool</td>
											<td align="left">false</td>
											<td align="left">Allow users to exit the lightbox by clicking the backdrop</td>
										</tr>
										<tr>
											<td align="left">currentImage</td>
											<td align="left">number</td>
											<td align="left">0</td>
											<td align="left">The index of the image to display initially</td>
										</tr>
										<tr>
											<td align="left">customControls</td>
											<td align="left">array</td>
											<td align="left">undefined</td>
											<td align="left">An array of elements to display as custom controls on the top of lightbox</td>
										</tr>
										<tr>
											<td align="left">enableKeyboardInput</td>
											<td align="left">bool</td>
											<td align="left">true</td>
											<td align="left">Supports keyboard input - <code>esc</code>, <code>arrow left</code>, and <code>arrow right</code></td>
										</tr>
										<tr>
											<td align="left"><a href="#images">images</a></td>
											<td align="left">array</td>
											<td align="left">undefined</td>
											<td align="left">Required. An array of objects containing valid src and srcset values of img element</td>
										</tr>
										<tr>
											<td align="left">imageCountSeparator</td>
											<td align="left">string</td>
											<td align="left">' of '</td>
											<td align="left">Custom separator for the image count</td>
										</tr>
										<tr>
											<td align="left">isOpen</td>
											<td align="left">bool</td>
											<td align="left">false</td>
											<td align="left">Whether or not the lightbox is displayed</td>
										</tr>
										<tr>
											<td align="left">onClickPrev</td>
											<td align="left">func</td>
											<td align="left">undefined</td>
											<td align="left">Fired on request of the previous image</td>
										</tr>
										<tr>
											<td align="left">onClickNext</td>
											<td align="left">func</td>
											<td align="left">undefined</td>
											<td align="left">Fired on request of the next image</td>
										</tr>
										<tr>
											<td align="left">onClickImage</td>
											<td align="left">func</td>
											<td align="left">undefined</td>
											<td align="left">Handle click event on the current image</td>
										</tr>
										<tr>
											<td align="left">onClickThumbnail</td>
											<td align="left">func</td>
											<td align="left">undefined</td>
											<td align="left">Handle click on thumbnail</td>
										</tr>
										<tr>
											<td align="left">onClose</td>
											<td align="left">func</td>
											<td align="left">undefined</td>
											<td align="left">Required. Handle closing of the lightbox</td>
										</tr>
										<tr>
											<td align="left">preloadNextImage</td>
											<td align="left">bool</td>
											<td align="left">true</td>
											<td align="left">Based on the direction the user is navigating, preload the next available image.</td>
										</tr>
										<tr>
											<td align="left">preventScroll</td>
											<td align="left">bool</td>
											<td align="left">true</td>
											<td align="left">Determines whether scrolling is prevented</td>
										</tr>
										<tr>
											<td align="left">showCloseButton</td>
											<td align="left">bool</td>
											<td align="left">true</td>
											<td align="left">Optionally display a close "X" button in top right corner</td>
										</tr>
										<tr>
											<td align="left">showImageCount</td>
											<td align="left">bool</td>
											<td align="left">true</td>
											<td align="left">Optionally display image index, e.g., "3 of 20"</td>
										</tr>
										<tr>
											<td align="left">showThumbnails</td>
											<td align="left">bool</td>
											<td align="left">false</td>
											<td align="left">Optionally display thumbnails beneath the Lightbox</td>
										</tr>
										<tr>
											<td align="left">theme</td>
											<td align="left">object</td>
											<td align="left">undefined</td>
											<td align="left">Pass through styles to theme each component; <code>arrow</code>, <code>container</code>, etc.</td>
										</tr>
										<tr>
											<td align="left">width</td>
											<td align="left">number</td>
											<td align="left">1024</td>
											<td align="left">Maximum width of the carousel; defaults to 1024px</td>
										</tr>
									</tbody>
								</table>
							</div>
							<h2>Images</h2>
							<div class="options-table-container" id="images">
								<table class="options-table">
									<thead>
										<tr>
											<th align="left">Property</th>
											<th align="left">Type</th>
											<th align="left">Default</th>
											<th align="left">Description</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td align="left">src</td>
											<td align="left">string</td>
											<td align="left">undefined</td>
											<td align="left">Required. The primary image path</td>
										</tr>
										<tr>
											<td align="left">srcset</td>
											<td align="left">array</td>
											<td align="left">undefined</td>
											<td align="left">List of alternative image sizes</td>
										</tr>
										<tr>
											<td align="left">caption</td>
											<td align="left">string</td>
											<td align="left">undefined</td>
											<td align="left">Displayed benath the current image. Great for description or attribution</td>
										</tr>
										<tr>
											<td align="left">thumbnail</td>
											<td align="left">string</td>
											<td align="left">undefined</td>
											<td align="left">Thumbnail to display if <code>showThumbnails</code> is set to <code>true</code></td>
										</tr>
									</tbody>
								</table>
							</div>
						</section>

						<section id="license" class="section-license">
							<h2>License</h2>
							<p>React Images is free to use for personal and commercial projects under <a target="_blank" href="https://github.com/jossmac/react-images/blob/master/LICENSE">the MIT license</a>.</p>
							<p>Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.</p>
						</section>

						<section id="help" class="section-help">
							<h2>Help</h2>

							<h3>Have a question?</h3>
							<p>Follow the <a target="_blank" href="https://github.com/jossmac/react-images#quick-start">quick start guide</a> on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.</p>

							<h3>Found a bug?</h3>
							<p>If you find a bug, please read the <a target="_blank" href="https://github.com/jossmac/react-images/blob/master/.github/CONTRIBUTING.md">Contribution Guildelines</a> before you <a target="_blank" href="https://github.com/jossmac/react-images/issues">report the issue</a>.</p>
						</section>
					</div>
				</div>
			</div>
			<footer class="page-footer">
				<span class="page-footer__copyright--small">Copyright </span>
				<span class="page-footer__copyright--large">&copy; </span>
				<a target="_blank" href="https://twitter.com/jossmackison" target="_blank">Joss Mackison</a> 2016
			</footer>
		</div>
	</div>
	<script>
		document.getElementById('github-stars-button').dataset.style = window.innerWidth > 480 ? 'mega': null;
	</script>
	<script src="common.js"></script>
	<script src="app.js"></script>
	<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
